<template>
    <div id="map" class="three-canvas" ref="threeTarget"></div>
</template>
<script>
import { ThreeEngine } from '@/components/js/ThreeEngine';
import { box } from '@/components/js/TBaseObject'
import { createMap } from '@/components/js/TMapObject'
import { allLights } from '@/components/js/TLights'
// import { allHelper } from '@/components/js/THelper'
import mapJson from '@/assets/json/map'

export default {
    data() {
        return {
            ThreeEngine: null,
        }
    },
    mounted() {
        this.ThreeEngine = new ThreeEngine(this.$refs.threeTarget)

        console.log(this.ThreeEngine.renderer);
        // this.ThreeEngine.addObject(box)  // 添加基础模型
        this.ThreeEngine.addObject(...allLights)  // 添加光线
        // this.ThreeEngine.addObject(...allHelper)   // 添加辅助

        this.ThreeEngine.addObject(createMap(mapJson))  // 添加基础模型



    },
}
</script>

<style scoped lang="less">
.three-canvas {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #d6eaff;
}
</style>